<template>
	<view class="container">
		<uni-row>
			<uni-col :span="20"><text class="title">选择入园日期</text></uni-col>
			<uni-col :span="4"><text class="title">2024.06</text></uni-col>
		</uni-row>


		<!-- 选择日期 -->
		<view class="date-picker">
			<view v-for="(day, index) in days" :key="index" @click="selectDate(day)"
				:class="{'selected': selectedDate === day.text, 'disabled': day.status === 'closed' || day.status === 'full' }"
				class="day-item">
				<text>{{ day.text }}</text><br>
				<text v-if="day.status === 'full'" class="status-text">已约满</text>
				<text v-if="day.status === 'closed'" class="status-text">闭馆</text>
				<text v-if="day.status === ''" class="status-text2">未约满</text>
			</view>
		</view>

		<!-- 选择时间段 -->
		<text class="title">选择入园时间段</text>
		<view class="card">
			<view class="time-picker">

				<button v-for="(slot, index) in timeSlotsWithStatusText" :key="index" @click="selectTimeSlot(slot)"
					:disabled="slot.isFull" :class="{ 'full': slot.isFull }" class="time-slot">
					<text class="timetext">{{ slot.time }} | {{ slot.statusText }}</text>
				</button>

			</view>

			<view style="width: 100%;height: 164rpx;"></view>
		</view>


		<!-- 确认按钮 -->
		<button @click="confirmSelection" class="confirm-btn">
			<text>时段确认</text>
		</button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import data from "../../data/data.json"
	const days = ref({});
	days.value = data.days;

	const timeSlots = ref({});
	timeSlots.value = data.timeSlots;
	const timeSlotsWithStatusText = computed(() => {
		return timeSlots.value.map(slot => ({
			...slot,
			statusText: slot.isFull ? '已约满' : `余 ${slot.remaining}`
		}));
	});
	const selectedDate = ref('');
	const selectedTimeSlot = ref(null);

	function selectDate(day) {
		if (day.status !== 'closed' && day.status !== 'full') {
			selectedDate.value = day.text;
		} else {
			// 可以选择在这里弹窗提示用户
			alert(day.status === 'closed' ? '该日闭馆，不可选择' : '该日已约满，不可选择');
		}
	}

	function selectTimeSlot(slot) {
		if (!slot.isFull) {
			selectedTimeSlot.value = slot;
		}
	}

	function confirmSelection() {
		if (selectedDate.value && selectedTimeSlot.value) {
			// 从selectedDate.value中提取数字
			const dateNumber = selectedDate.value.match(/\d+/)[0];

			const query =
				`?date=${encodeURIComponent(dateNumber)}&time=${encodeURIComponent(selectedTimeSlot.value.time)}`;

			console.log('Selected Date Number:', dateNumber);
			console.log('Selected Time Slot:', selectedTimeSlot.value.time);

			uni.navigateTo({
				url: `/pages/groupReserve/groupReserve${query}`
			});
		} else {
			alert('请选择日期和时间');
		}
	}
</script>

<style scoped>
	.container {
		padding: 12px;
		background: #F3F5F9;
	}

	.title {
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin: 10px 0;
	}

	.date-picker {
		margin: 16px 0;
		background: #FFFFFF;
		border-radius: 12px;
		padding: 14px 3px;
	}

	.date-picker .day-item {
		text-align: center;
		display: inline-block;
		width: 42px;
		height: 64px;
		background: #F5F5F5;
		line-height: 20px;
		margin: 4px;
		padding-top: 11px;
		border-radius: 4px;
		cursor: pointer;
	}

	/* 选中日期的样式 */
	.date-picker .day-item.selected {
		background-color: #8DCB6D;
		color: white;
	}

	/* 禁用状态样式 */
	.date-picker .day-item.disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	.status-text {
		font-weight: 400;
		font-size: 11px;
	}

	.status-text2 {
		font-weight: 400;
		font-size: 11px;
		color: #f5f5f5;
	}

	.time-picker {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: #FFFFFF;
		border-radius: 12px;
	}

	.card {
		padding-top: 28rpx;
		padding-left: 20rpx;
		width: 702rpx;
		height: 292rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}


	.time-picker .time-slot {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 165px;
		height: 30px;
		background: #F5F5F5;
		line-height: 17px;
		margin: 4px;
		font-weight: 400;
		font-size: 14px;
		color: #131111;
		letter-spacing: 0;
		border-radius: 2px;
		cursor: pointer;
	}

	.time-slot:not(.full):hover {

		background-color: #8DCB6D;
		color: white;

	}


	.full text {
		opacity: 0.5;
	}



	.confirm-btn {
		margin-top: 210px;
		background: #8DCB6D;
		border-radius: 25px;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
</style>